<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息统计</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css" media="all">
		 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

		<script src="${pageContext.request.contextPath}/js/echarts.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/china.js" type="text/javascript"></script>

	</head>
	
	<body class="layui-layout-login">
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="main" style="width: 600px;height:400px;"></div>
		<div id="main1" style="width: 600px;height:400px;"></div>
		<div id="main2" style="width: 600px;height:400px;"></div>

	</body>
	<script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js" type="text/javascript"></script>
	<script>
        // 基于准备好的dom，初始化echarts实例【对象】
        var myChart = echarts.init(document.getElementById('main'));
        var myChart1 = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));

        $.ajax({
			url:"${pageContext.request.contextPath}/user/showGender",
			dataType:"json",
			success:function(data){
				// 指定图表的配置项和数据
				// 展示用户的男女人数对比
				var option = {
					//图表的标题
					title: {
						text: '男女人数对比'
					},
					//工具栏
					tooltip: {},
					//legend 传奇 数学中 系列
					//数据的统计分类 数据的统计类型
					legend: {
						data:['人数']
					},
					//x轴坐标
					xAxis: {
						data: ["男","女"]
					},
					//y轴 不需要定义 自适应
					yAxis: {},
					//给x轴赋值
					series: [{
						//name 需要和 legend中的data对应
						name: '人数',
						//图表要展示的样式 bar柱状图 line折线图 pie饼状图
						type: 'line',
						//给x轴坐标赋值 这个数据一般都来自后台
						data: [data[0].value,data[1].value]
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		})


		$(function () {
			$.ajax({
				url:"${pageContext.request.contextPath}/user/showWeeks",
				dataType:"json",
				success:function (data) {
					console.log(data)
					var option = {
						title: {
							text: '用户三周注册量变化'
						},
						tooltip: {},
						legend: {
							data:['注册量']
						},
						xAxis: {
							data: ["三周","两周","一周"]
						},
						yAxis: {},
						series: [{
							name: '注册量',
							//图表要展示的样式 bar 柱状图 line 折线图 pie饼状图
							type: 'line',
							//给x轴坐标赋值 这个数据一般都来自后台
							data: [data[2].value,data[1].value, data[0].value]
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option);
				}
			})
		})

		$.ajax({
			url:"${pageContext.request.contextPath}/user/showMap",
			dataType:"json",
			success:function(data){
				var option3 = {
					title : {
						text: '用户地区分布',
						left: 'center'
					},
					tooltip : {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left',
						data:['用户人数']
					},
					visualMap: {
						min: 0,
						max: 25000,
						left: 'left',
						top: 'bottom',
						text:['高','低'],           // 文本，默认为数值文本
						calculable : true
					},
					toolbox: {
						show: true,
						orient : 'vertical',
						left: 'right',
						top: 'center',
						feature : {
							mark : {show: true},
							dataView : {show: true, readOnly: false},
							restore : {show: true},
							saveAsImage : {show: true}
						}
					},
					series : [
						{
							name: '用户人数',
							type: 'map',
							mapType: 'china',
							roam: false,
							label: {
								normal: {
									show: false
								},
								emphasis: {
									show: true
								}
							},
							data:data
						}
					]
				};
				myChart2.setOption(option3);
			}
		})

	</script>
</html>
